import React, { Component } from 'react'
import ViewShot, { captureRef } from 'react-native-view-shot'
import { View, StyleSheet, Text, Image, Button } from 'react-native'

export class TestViewShot extends Component {
  constructor (props) {
    super(props)
    this.state = {
      source: ''
    }
  }

  render () {
    const { source } = this.state
    return (
      <View style={styles.container} nativeID={'nativeIdView'}>
        <ViewShot style={styles.viewShot} ref={this.viewShotRef} options={{ format: 'jpg', quality: 0.9 }}>
          <Text>...Something to rasterize...</Text>
        </ViewShot>
        <View style={styles.imageView}>
          <Image source={{ uri: source }} style={styles.image}/>
        </View>
        <Button title={'截屏'} onPress={this.shotView}/>
      </View>
    )
  }

  viewShotRef = (ref) => {
    this.viewShotRef = ref
  }

  componentDidMount () {

  }

  shotView = () => {
    // ToastExample.show("nativeIdView", 1000);
    // this.refs.viewShot.capture().then(uri => {
    //   console.log("do something with ", uri);
    //   this.setState({
    //     source: uri
    //   })
    // });

    captureRef(this.viewShotRef, {
      format: 'jpg',
      quality: 0.8
    }).then(
      uri => {
        console.log('Image saved to', uri)
        this.setState({
          source: uri
        })
      },
      error => console.error('Oops, snapshot failed', error)
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },
  viewShot: {
    backgroundColor: 'red'
  },
  imageView: {
    width: 300,
    height: 500,
    backgroundColor: 'white'
  },
  image: {
    width: 300,
    height: 500,
    resizeMode: 'contain'
  }
})
